<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=Edge">
    <title>用户中心</title>
    <link rel="stylesheet" href="__TEMPLATE__/webfile/css/main.css">
    <link rel="stylesheet" href="__TEMPLATE__/webfile/css/common.css">
    <link rel="stylesheet" href="__TEMPLATE__/webfile/css/message.css">
    <link rel="stylesheet" href="__TEMPLATE__/webfile/css/dai.css" />
    <link rel="stylesheet" href="__TEMPLATE__/webfile/css/bootstrap.min.css">
</head>
<script src="__TEMPLATE__/webfile/js/jquery.js"></script>
<script src="__TEMPLATE__/webfile/js/bootstrap.min.js"></script>

<body>

<div class="main usercenter w">
    <div class="user_gamerecord w">
        <div class="user_right right " style="width: 100%">
            <div class="user_main">
                <div class="tabbable"> <!-- Only required for left/right tabs -->
                    <ul class="nav nav-tabs" style="padding-top: 5px;padding-left: 5px;height: 40px">
                        <li class="active"><a href="#tab1" data-toggle="tab" class="badge badge-inversee" style="height: 23px">消息中心</a></li>
                    </ul>
                    <ul class="nav nav-tabs" style="padding-top: 5px;padding-left: 5px;height: 40px;position:fixed;top:0;z-index: 5;width: 100%">
                        <li class="active"><a href="#tab1" data-toggle="tab" class="badge badge-inversee" style="height: 23px">消息中心</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <!--消息中心　　-->
                            <div class="news fr">
                                <div class="news-list">
								{foreach $xiaoxi_ls as $rt}
                                   <div class="row row2">
                                        <i></i>
                                        <div>
                                            <i></i>
                                            <span></span>
                                            <p>{$rt.test}</p>
                                        </div>
                                    </div>
								{/foreach}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    $(document).ready(function () {
        //        选中点击效果
        var flag=1;
        $('.row').each(function () {
            $(this).click(function () {
                console.log($(this));
                if($(this).context.className=='row row1'){
                    let aa=`<i></i>
                        <div>
                        <i></i>
                        <span></span>
                        <p>`;
                    let bb=$(this).children("p").context.innerText;
                    aa=aa+bb+`</p></div>`;
                    $(this).html(aa);
                    $(this).removeClass('row1').addClass('row2')
                    hover()
                }else{
                    let aa=` <div class="row11  st1" style="margin-left: -0.3%;">
                                            <img src="__TEMPLATE__/webfile/img/mes1.png" alt="">
                                            <p>
                                            `;
                    let bb=$(this).children("p").context.innerText;
                    aa=aa+bb+`</p></div>`;
                    $(this).html(aa);
                    $(this).removeClass('row2').addClass('row1')
                    $('.row1').hover(
                           on,
                           on
                    );
                }
            })
            hover()
            function hover(){
                $('.row2').hover(
                        on,
                        leave
                );
            }
            function on(){
                $(this).children('div').css({"border":"2px solid #177fd9"});
                $(this).children('div').children('span').css({"border-top":"2px solid #177fd9","border-left":"2px solid #177fd9"});
                $(this).children('i').css({"background":"url(__TEMPLATE__/webfile/img/blue.jpg) no-repeat right"})
            }
            function leave(){
                $(this).children('div').css({"border":"2px solid #e8e8e8"});
                $(this).children('div').children('span').css({"border-top":"2px solid #e8e8e8","border-left":"2px solid #e8e8e8"});
                $(this).children('i').css({"background":"url(__TEMPLATE__/webfile/img/grey.jpg) no-repeat right"})
            }
        });



    })
</script>
</html>




